<template>
  <div class="main">
    <div class="filter-box">
      <div class="filter-left">
        <el-input
            v-model.trim="condition.value"
            maxlength="20"
            style="width: 300px"
            size="mini"
            placeholder="请输入告警内容"
        ></el-input>
        <el-select v-model="condition.employType" size="mini" placeholder="请选择资源类型" clearable>
            <el-option label="资产" :value="0"></el-option>
            <el-option label="人员" :value="1"></el-option>
        </el-select>
        <el-select v-model="condition.type" size="mini" placeholder="请选择告警类型" clearable>
          <el-option label="标签" :value="0"></el-option>
          <el-option label="栅栏" :value="1"></el-option>
        </el-select>
        <el-date-picker
            style="margin-right: 10px"
            v-model="timeValue"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="mini"
            type="datetimerange"
            start-placeholder="开始日期"
            range-separator="至"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            align="left"
        >
        </el-date-picker>
        <el-button type="primary" size="mini" icon="el-icon-search" :disabled="loading" @click="handleSearch">查询
        </el-button>
        <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
        v-loading="loading"
        stripe
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        height="100%"
        :data="tableData"
        tooltip-effect="dark"
        align="center"
        @selection-change="handleSelectionChange"
    >
      <el-table-column label="告警类别" prop="fullName" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.type == 0 ? '标签离线告警' : '栅栏告警' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首次告警时间" prop="faultTime" min-width="200" show-overflow-tooltip></el-table-column>
      <el-table-column label="恢复告警时间" prop="recoveryTime" min-width="200" show-overflow-tooltip></el-table-column>
      <el-table-column label="关联资产/员工" prop="employName" min-width="160" show-overflow-tooltip></el-table-column>
      <el-table-column label="关联标签" prop="name" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column label="所属区域" prop="employRegionName" min-width="160" show-overflow-tooltip></el-table-column>
      <el-table-column label="所属部门" prop="employDeptName" min-width="160" show-overflow-tooltip></el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="page-block">
      <el-pagination @current-change="handleCurrentChange" :current-page="pageNo" :page-size="pageSize"
                     layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {getAlarmPage} from '@/api/alarm'
import {formatDate} from '@/utils/validate'

export default {
  data() {
    return {
      condition: {
        value: '',
        employType: '',
        type: '',
        flag: false
      },
      timeValue: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近两小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 2)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近四小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 4)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      tableData: [],
      loading: true,
      pageSize: 15,
      pageNo: 1,
      total: 0
    }
  },
  created() {
    this.setTime()
    this.getData()
  },
  methods: {
    setTime() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      this.timeValue = [start, end]
      this.timeValue.forEach((item, index) => {
        this.timeValue[index] = formatDate(item.getTime())
      })
    },
    //获取数据
    getData() {
      if (!this.timeValue) {
        this.timeValue = []
      }
      this.loading = true
      let obj = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        startTime: this.timeValue[0],
        endTime: this.timeValue[1],
        ...this.condition
      }
      getAlarmPage(obj)
          .then((res) => {
            this.loading = false
            if (res.status != 200) {
              this.$msgPrompt.error(res.msg)
              this.pageNo = 1
              this.tableData = []
              this.total = 0
              return
            }
            this.tableData = res.obj.records
            this.total = res.obj.total
          })
          .catch((error) => {
            this.loading = false
          })
    },
    //查询
    handleSearch() {
      this.pageNo = 1
      this.getData()
    },
    //重置
    handleReset() {
      for (let key in this.condition) {
        if (key !== 'flag') {
          this.condition[key] = ''
        }

      }
    },
    handleSelectionChange(options) {
    },
    //页码点击 初始页pageNo、初始每页数据数pageSize和数据data
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo
      this.getData()
    }
  }
}
</script>
<style scoped lang="scss">
.main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0 10px;

  .el-select {
    width: 200px;
  }
}
</style>
